<template>
	<section>
		<div>
			<p class="c1OpenP fixMax" id="fadOutP"><label>总资产 ￥ 0</label></p>
			<img src="../../static/img/openRight.png" class="openRightImg" @click="openRight" />
		</div>
		<header id="c1HeaderId">
			<p><img src="../../static/img/icon.png" /></p>
			<p><label>用户名称</label><span @click="jump('/backups')">请备份</span></p>
			<p><label>0x10C9E70...79DAA87B60</label><img src="../../static/img/qrC1.png" @click="jump('/qrcodeInfo')" /></p>
			<p><img src="../../static/img/c1Add.png" class="c1AddImg" @click="jump('/addCurrency')" /></p>
		</header>
		<article>
			<div class="c1Single">
				<img src="../../static/img/ic1.png" /><label>ETH</label><span><p>2</p><p style="color: rgb(119,131,152);">≈￥7.62</p> </span>
			</div>
			<div class="c1Single">
				<img src="../../static/img/ic2.png" /><label>REP</label><span><p>11</p><p style="color: rgb(119,131,152);">≈￥99.1</p> </span>
			</div>
			<div class="c1Single">
				<img src="../../static/img/ic3.png" /><label>1ST</label><span><p>20</p><p style="color: rgb(119,131,152);">≈￥0.02</p> </span>
			</div>
			<div class="c1Single">
				<img src="../../static/img/ic4.png" /><label>ANT</label><span><p>20</p><p style="color: rgb(119,131,152);">≈￥0.02</p> </span>
			</div>
			<div class="c1Single">
				<img src="../../static/img/ic5.png" /><label>MYST</label><span><p>20</p><p style="color: rgb(119,131,152);">≈￥0.02</p> </span>
			</div>
			<div class="c1Single">
				<img src="../../static/img/ic6.png" /><label>OWN</label><span><p>20</p><p style="color: rgb(119,131,152);">≈￥0.02</p> </span>
			</div>
			<div class="c1Single">
				<img src="../../static/img/ic7.png" /><label>SNT</label><span><p>20</p><p style="color: rgb(119,131,152);">≈￥0.02</p> </span>
			</div>
			<div class="c1Single">
				<img src="../../static/img/ic8.png" /><label>BAT</label><span><p>20</p><p style="color: rgb(119,131,152);">≈￥0.02</p> </span>
			</div>
			<div class="c1Single">
				<img src="../../static/img/ic9.png" /><label>EOS</label><span><p>20</p><p style="color: rgb(119,131,152);">≈￥0.02</p> </span>
			</div>
			<div class="c1Single">
				<img src="../../static/img/ic10.png" /><label>PAY</label><span><p>20</p><p style="color: rgb(119,131,152);">≈￥0.02</p> </span>
			</div>
			<div class="c1Single">
				<img src="../../static/img/ic11.png" /><label>BNT</label><span><p>20</p><p style="color: rgb(119,131,152);">≈￥0.02</p> </span>
			</div>
			<p style="height: 0.5rem;"></p>
		</article>
		<menuBtm :show="showBtm"></menuBtm>
		<aside @click="openRight" class="fixMax" id="c1HidOut" @touchmove.prevent>
			<div @click.stop="rightCk" id="c1hidCt">
				<p><img src="../../static/img/33.png" />昵称 </p>
				<p><img src="../../static/img/scanning.png" />扫一扫</p>
				<p><img src="../../static/img/wallet.png" />创建钱包</p>
			</div>
		</aside>
	</section>
</template>

<script>
	//	import { homeGet } from '../common/comfn';
	import menuBtm from '../com/menuBtm.vue';
	export default {
		data() {
			return {
				showHid: true,
				canCk: true,
				showBtm: false
			}
		},
		components: {
			menuBtm
		},
		methods: {
			openRight: function() {
				var vm = this;
				if(!this.canCk) {
					return;
				}
				this.canCk = false;
				if(this.showHid) {
					document.getElementById('c1hidCt').style.left = 0;
					document.getElementById('c1HidOut').style.zIndex = 12;
					setTimeout(function() {
						vm.canCk = true;
					}, 600)

				} else {
					document.getElementById('c1hidCt').style.left = '100%';
					setTimeout(function() {
						if(document.getElementById('c1HidOut')) {
							document.getElementById('c1HidOut').style.zIndex = -999;
							vm.canCk = true;
						}
					}, 600)
				}
				this.showHid = !this.showHid;
			},
			rightCk: function() {},
			jump2: function() {}
		},
		created: function() {},
		mounted: function() {
			var vm = this;
			var allH = parseInt(getH('c1HeaderId') - getH('fadOutP'));
			this.atScorll(function(val) {
				if(val <= allH) {
					qid('fadOutP').style.opacity = val / allH;
					qid('c1HeaderId').style.opacity = 1 - val / allH;
				} else {
					qid('fadOutP').style.opacity = 1;
				}
			})
		}
	}
</script>

<style scoped="scoped">
	header {
		position: relative;
		overflow: hidden;
		height: 3.1rem;
		background-image: url(../../static/img/c1Bg2.png);
		background-size: 100% 100%;
	}
	
	header p {
		text-align: center;
		color: #fff;
	}
	
	header p:nth-child(1) img {
		width: 0.6rem;
		margin-top: 0.42rem;
	}
	
	header p:nth-child(2) {
		font-size: 0.18rem;
		position: relative;
		margin-top: 0.2rem;
	}
	
	header p:nth-child(2) label {
		display: inline-block;
		vertical-align: middle;
	}
	
	header p:nth-child(2) span {
		display: inline-block;
		font-size: 0.1rem;
		/*width: 0.5rem;*/
		/*color: rgb(197, 159, 135);*/
		color: rgb(122, 241, 242);
		/*border: 1px solid rgb(197, 159, 135);*/
		border: 1px solid rgb(122, 241, 242);
		/*line-height: 0.17rem;*/
		padding: 2px 0.1rem;
		border-radius: 0.17rem;
		margin-left: 0.1rem;
		vertical-align: middle;
	}
	
	header p:nth-child(3) label {
		display: inline-block;
		vertical-align: middle;
	}
	
	header p:nth-child(3) img {
		display: inline-block;
		height: 0.14rem;
		margin-left: 0.1rem;
		vertical-align: middle;
	}
	
	header p:nth-child(3) {
		margin-top: 0.2rem;
	}
	
	.c1AddImg {
		position: absolute;
		width: 0.3rem;
		bottom: 0.2rem;
		right: 0.2rem;
		top: auto;
		z-index: 10;
	}
	
	.c1Single {
		background-color: #FFFFFF;
		height: 0.82rem;
		padding-top: 0.2rem;
		border-bottom: 1px solid #e8e8e8;
	}
	
	.c1Single img,
	.c1Single label,
	.c1Single span {
		display: inline-block;
		vertical-align: middle;
		height: 0.42rem;
	}
	
	.c1Single img {
		width: 0.42rem;
		border-radius: 0.42rem;
		margin-left: 0.15rem;
	}
	
	.c1Single label {
		margin-left: 0.1rem;
		font-size: 0.18rem;
		line-height: 0.42rem;
	}
	
	.c1Single span {
		float: right;
		margin-right: 0.15rem;
		text-align: right;
	}
	
	.c1Single span p {
		margin-top: 0.02rem;
	}
	
	.c1OpenP {
		position: fixed;
		top: 0;
		height: 0.6rem;
		width: 100%;
		background-color: rgb(158, 129, 104);
		opacity: 0;
		z-index: 11;
	}
	
	.c1OpenP label {
		display: inline-block;
		margin-top: 0.2rem;
		margin-left: 0.1rem;
		color: #FFFFFF;
	}
	
	.openRightImg {
		position: fixed;
		height: 0.22rem;
		top: 0.18rem;
		width: 0.22rem;
		z-index: 12;
		left: 50%;
		margin-left: 1.5rem;
	}
	
	.c1OpenP img {
		position: absolute;
	}
	
	aside {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		padding-left: 1.55rem;
		overflow: hidden;
		z-index: -1;
		background-color: rgba(0, 0, 0, 0.1);
		-webkit-transform: translateZ(0);
	}
	
	aside div {
		transition: all 0.5s;
		background-color: #FFFFFF;
		height: 100%;
		position: relative;
		overflow: hidden;
		left: 100%;
	}
	
	aside img {
		display: inline-block;
		vertical-align: middle;
		height: 0.16rem;
		margin-right: 0.2rem;
	}
	
	aside div p:nth-child(1) {
		background-color: #ececec;
		margin-top: 0.6rem;
		height: 0.6rem;
		padding-top: 0.1rem;
		padding-left: 0.2rem;
	}
	
	aside div p:nth-child(1) img {
		height: 0.4rem;
		width: 0.4rem;
		border-radius: 0.4rem;
		border: 1px solid #FFFFFF;
	}
	
	aside div p:nth-child(2) {
		margin-top: 0.5rem;
		padding-left: 0.2rem;
	}
	
	aside div p:nth-child(3) {
		margin-top: 0.2rem;
		padding-left: 0.2rem;
	}
</style>